<!-- video.vue -->
<template>
  <!-- 视频页面 -->
  <view class="video flex-column">
    <!-- 全局导航栏 -->
    <toptab-Bar></toptab-Bar>

    <!-- 视频的导航栏 -->
    <video-tab-bar :tabBarItems="tabBarItems" @tab-change="handleTabChange" @menu-click="toggleFilters"></video-tab-bar>

    <!-- 筛选条件组件 -->
    <selectBar v-if="showFilters" :tabBarItems="yearFilterItems" :activeIndex="yearActiveIndex" @tab-change="handleYearChange" videoType="年份"></selectBar>
    <selectBar v-if="showFilters" :tabBarItems="regionFilterItems" :activeIndex="regionActiveIndex" @tab-change="handleRegionChange" videoType="地区"></selectBar>

    <!-- 条件渲染视频轮播图部分 -->
    <template v-if="currentTabId === '1'">
      <swiper
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="1000"
          :circular="true"
          class="video__swiper"
      >
        <swiper-item
            class="video__swiper-item"
            v-for="item in swiperItems"
            :key="item.adver_url_id"
            @click="onClickToVideoDetails(item.adver_where)"
        >
          <image :src="item.advertisement_pic" mode="aspectFill" class="video__swiper-img"></image>
        </swiper-item>
      </swiper>
    </template>

    <!-- 不是短视频且没点击 -->
    <view class="video__display-items flex" v-if="!isClickVideo||currentTabId!=='8'">
      <video-display-item
          class="video__display-item"
          v-for="(item,index) in currentDisplayItems"
          :key="item.id"
          :item="item"
          :is-short="isShort"
          :active-index="index"
          @on-click-video="onClickVideo"
      ></video-display-item>
    </view>

    <!-- 刷短视频 -->
    <swiper
        v-else
        class="video__short"
        vertical="true"
        :current="activeIndex"
    >
      <swiper-item
          class="video__short-item"
          v-for="item in currentDisplayItems"
          :key="item.id"
      >
        <short-video-item :item="item"></short-video-item>
      </swiper-item>
    </swiper>

  </view>
</template>

<script setup>
import toptabBar from  '@/pages/index/toptabbar/tabbar.vue';
import videoTabBar from '@/components/videoTabBar/videoTabBar.vue';
import videoDisplayItem from '@/components/videoDisplayItem/videoDisplayItem.vue';
import selectBar from '@/components/selectBar/selectBar.vue';
import shortVideoItem from './shortVideoItem/shortVideoItem.vue'
import { ref, onMounted } from 'vue';
import decVideoApi from "/api/dec/decIndex/decVideoApi";

const currentTabId = ref('1'); // 默认选中id为'1'的tab


const tabBarItems = ref([
  {label:'推荐',id:'1'},
  // {label:'中国梦新征程',id:'2'},
  // {label:'电影',id:'3'},
  // {label:'电视剧',id:'4'},
  // {label:'动画',id:'5'},
  // {label:'综艺节目',id:'6'},
  // {label:'纪录片',id:'7'},
  {label:'短视频',id:'8'},
  // {label:'体育',id:'9'},
  // {label:'活动',id:'10'},
  // {label:'微短剧',id:'11'},
  // {label:'戏剧',id:'12'},
  // {label:'艺术',id:'13'},
  // {label:'音乐',id:'14'},
  // {label:'其他',id:'15'},
  // {label:'网络公益广告',id:'16'},
])

const yearFilterItems = ref([
  {label: '全部', id: '0'},
  {label: '2024', id: '2024'},
  {label: '2023', id: '2023'},
  {label: '2022', id: '2022'},
  {label: '2021', id: '2021'},
  {label: '2020', id: '2020'},
])

const regionFilterItems = ref([
  {label: '全部', id: '0'},
  {label: '内地', id: '1'},
  {label: '中国香港', id: '2'},
  {label: '中国台湾', id: '3'},
  {label: '美国', id: '4'},
])

const showFilters = ref(false); // 控制筛选条件组件的显示与隐藏
const yearActiveIndex = ref(0); // 年份选择的索引
const regionActiveIndex = ref(0); // 地区选择的索引

const handleTabChange = (item) => {
  currentTabId.value = item.id;
  if(item.id === '1'){
    Gf_video_list();
  } else if(item.id === '8'){	//短视频
    let params = {
      video_type:594
    }
    Gf_type_video_list(params);
  }
  showFilters.value = false; // 切换到短视频时隐藏筛选条件组件
  yearActiveIndex.value = 0; // 重置年份选择
  regionActiveIndex.value = 0; // 重置地区选择
};

const toggleFilters = () => {
  showFilters.value = !showFilters.value; // 切换显示与隐藏状态
};

const handleYearChange = (item) => {
  yearActiveIndex.value = item.index; // 更新年份选择的索引
  console.log('选择的年份:', item);
  searchVideos();
};

const handleRegionChange = (item) => {
  regionActiveIndex.value = item.index; // 更新地区选择的索引
  console.log('选择的地区:', item);
  searchVideos();
};

async function searchVideos() {
  console.log('搜索视频');
  decVideoApi.Search_video_API({year:yearFilterItems.value[yearActiveIndex.value].label,area:regionFilterItems.value[regionActiveIndex.value].label}).then((res)=>{
    console.log('Search_video_API搜索成功',res);
  }).catch((err)=>{
    console.log('Search_video_API搜索失败',err);
  })

};


const swiperItems = ref();
// 推荐
const displayItems = ref();
// 短视频的
const displayItems8 = ref();

// 需要处理
const currentDisplayItems = ref();

// 是否进入短视频
const isShort = ref(false);

// 是否点击视频
const isClickVideo = ref(false);

const activeIndex = ref(0);

function onClickVideo(data){
  isClickVideo.value = data.isClick;
  activeIndex.value = data.activeIndex;
  console.log('点击的短视频序号：',activeIndex.value);
}

async function init(){
  await Gf_video_list();
}

async function Gf_video_list() { // 推荐视频列表
  let params = {};
  decVideoApi.Gf_video_list_API(params).then((res) => {
    console.log('Gf_video_list_API 推荐视频列表 成功', res);
    swiperItems.value = res.adver;
    // displayItems.value = res.datas;
    currentDisplayItems.value = res.datas;
  }).catch((err) => {
    console.error('Gf_video_list_API 推荐视频列表 失败', err);
  })
}

async function Gf_type_video_list(PARAMS={}) { // 视频分类板块列表

  // 短视频
  if(currentTabId.value==='8'){
    isShort.value = true;
  }else{
    isShort.value = false;
  }
  isClickVideo.value = false;

  let params = PARAMS || {};
  decVideoApi.Gf_type_video_list_API(params).then((res) => {
    console.log('Gf_type_video_list 视频分类板块列表 成功', res);
    // displayItems8.value = res.datas;
    currentDisplayItems.value = res.datas

  }).catch((err) => {
    console.error('Gf_type_video_list 视频分类板块列表 失败', err);
  })
}

const onClickToVideoDetails = (video_id) => {
  uni.navigateTo({
    url: `/pages/videoDetails/videoDetails?id=${video_id}`
  });
};

// onShow(()=>{
// 	console.log('页面展示');
// 	uni.showTabBar();
// })

onMounted(() => {
  // uni.showTabBar();
  // wx.showTabBar();
  init();
})



// 页面生命周期函数 onShow 中调用
// onShow() {

// }
</script>

<style lang="scss" scoped>
// 修改swiper原生的样式
::v-deep .uni-swiper-dots{
  // right:0;
  left: 80%;
  bottom: 40rpx;
}

::v-deep .uni-swiper-dot{
  width: 18rpx;
  height: 18rpx;
  border: 1px solid #f89737;
  background-color: transparent;
}

::v-deep .uni-swiper-dot-active{
  width: 20rpx;
  height: 20rpx;
  background-color: #f89737;
}

.video{
  width: 100%;
  height: 100%;
  &__swiper{
    width: 100%;
    height: 382rpx;

    &-item{
      width: 100%;
      height: 100%;
    }


    &-img{
      width: 100%;
      height: 100%;
    }


  }

  &__display{
    &-items{
      padding-top: 20rpx;
      flex-wrap: wrap;
      justify-content: space-around;
    }

    &-item{
      // height: 283rpx;
    }

  }

  &__short{
    width: 100%;
    // height: 100%;
    flex: 1;

    &-item{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
